<template>
	<!-- 总计 -->
	<div class="total">
		<div class="total-item">
			<div class="title">总会员数</div>
			<div class="quantity">{{data.count}}</div>
		</div>
		<div class="total-item">
			<div class="title">2023年营业额(万元)</div>
			<div class="quantity">￥{{data.income_one}}</div>
		</div>
		<div class="total-item">
			<div class="title">2022年营业额(万元)</div>
			<div class="quantity">￥{{data.income_tow}}</div>
		</div>
	</div>
	<!-- 主体内容 -->
	<div class="main">
		<div class="left">
			<div class="content-title" style="justify-content: space-between;">
				<div class="title"></div>
				<div style="display: flex;">
					<div class="title" :class="{active: salesactive == 2023}" @click="salesa(2023)">今年</div>
					<div class="title" :class="{active: salesactive == 2022}" @click="salesa(2022)">去年</div>
				</div>
			</div>
			<div>
				<!-- 柱状图 -->
				<div class="bar_echars" style="height:300px"></div>
			</div>
		</div>
		<!-- 		<div class="right">
			<div class="content-title">
				<div class="title active">今年</div>
				<div class="title">去年</div>
			</div>
			<div class="list">
				<div class="list-title">排行榜</div>
				<div class="list-content">
					<div class="list-item">
						<div><span>1</span>蓝天施工队</div>
						<div>606</div>
					</div>
					<div class="list-item">
						<div><span>2</span>蓝翔工程队</div>
						<div>600</div>
					</div>
					<div class="list-item">
						<div><span>3</span>平头哥施工队</div>
						<div>589</div>
					</div>
					<div class="list-item">
						<div><span>4</span>蜜蜂工程队</div>
						<div>578</div>
					</div>
					<div class="list-item">
						<div><span>5</span>沙特工程队</div>
						<div>576</div>
					</div>
				</div>
			</div>
		</div> -->
	</div>
</template>

<script>
	/**
	 * 用户管理
	 * @author:Mumu
	 * @date:
	 */
	import * as echarts from 'echarts';

	export default {
		data() {
			return {
				field: [
					// 	{
					// 	title: '',
					// 	width:'30px',
					// 	slots: { customRender: 'checked' }
					// },
					{
						title: 'ID',
						width: '120px',
						dataIndex: 'id'
					}, {
						title: '角色名称',
						dataIndex: 'role_name'
					}, {
						title: '状态',
						dataIndex: 'status',
						slots: {
							customRender: 'iscompany'
						}
					},
					{
						title: '操作',
						align: "center",
						width: "120px",
						dataIndex: 'action',
						fixed: 'right',
						slots: {
							customRender: 'action'
						}
					}
				], //表头
				list: [{}], //列表
				pagination: {
					defaultCurrent: 1,
					current: 1,
					defaultPageSize: 10,
					pageSize: 10,
					showQuickJumper: true,
					showSizeChanger: true,
					showTotal: (total, range) => `共${total}条`,
					total: 0,
				},
				listloading: false,
				search: {},
				data: [],
				exportloading: false,
				barOption: {
					title: {
						text: '销售额(万元)'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							rotate: 15, // 设置倾斜角度
							interval: 0 // 设置横坐标文字全部显示
						},

					}],
					yAxis: [{
						type: 'value',
						name: 'y轴单位',
					}],
					series: [{
						name: '销售额',
						type: 'bar',
						barWidth: '20',
						data: []
					}]
				},
				lineOPtion: {
					title: {
						text: '综合分析'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['文案使用次数', '文案新增次数', '用户数量趋势']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: []
					},
					yAxis: {
						type: 'value'
					},
					waitlist: [{
						title: '-木木',
					}],
					series: [{
							name: '文案使用次数',
							type: 'line',
							stack: 'Total',
							data: []
						},
						{
							name: '文案新增次数',
							type: 'line',
							stack: 'Total',
							data: []
						},
						{
							name: '用户数量趋势',
							type: 'line',
							stack: 'Total',
							data: []
						}
					]
				},
				salesactive: 2023,
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getdata();
			})
		},
		methods: {
			salesa(type) {
				this.salesactive = type;
				this.getdata();
			},
			async getdata() {
				if (this.listloading) return;
				let info = await this.muajax.report();
				this.data = info.data;

				let rs = await this.muajax.databoard({
					salesactive: this.salesactive
				});
				if (rs.status == 200) {
					// 图表一
					this.boardData = rs.data

					this.barOption.xAxis[0].data = this.boardData.map(item => item.name)
					this.barOption.series[0].data = this.boardData.map(item => item.sum)

					this.initEcharts()
				}
			},
			initEcharts() {
				let myChart = echarts.init(document.querySelector('.bar_echars'));
				// 绘制图表
				myChart.setOption(this.barOption);
				window.addEventListener("resize", () => {
					// 让我们的图表调用 resize这个方法
					myChart.resize();
				});
			}
		},
		computed: {

		},
	}
</script>
<style lang="less" scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.total {
		display: flex;
		padding: 0 20px;
	}

	.total-item {
		width: 33.333%;
		padding: 20px;
		margin: 20px 20px 0 0;
		text-align: center;
		color: #333;
		font-size: 24px;
		border-radius: 8px;
		background-color: #fff;
	}

	.total-item:nth-child(3) {
		margin-right: 0;
	}

	.quantity {
		font-size: 32px;
	}

	.main {
		display: flex;
		min-width: 1020px;
	}

	.main .left {
		width: 98%;
		border-radius: 8px;
		overflow: hidden;
		margin: 20px 0 0 20px;
		background-color: #fff;
	}

	.main .content-title {
		display: flex;
	}

	.main .title {
		display: flex;
		padding: 15px 0;
		margin: 0 20px;
		color: #333;
		font-size: 24px;
		cursor: pointer;
	}

	.main .active {
		color: #418CFF;
		border-bottom: 3px solid #418CFF;
	}

	.main .right {
		width: 32%;
		border-radius: 8px;
		overflow: hidden;
		margin: 20px 20px 0 20px;
		background-color: #fff;
	}

	.list-title {
		margin: 0 20px;
		line-height: 80px;
		color: #333;
		font-size: 24px;
	}

	/* .list-content {

        } */
	.list-item {
		display: flex;
		justify-content: space-between;
		margin: 0 20px;
		line-height: 45px;
	}

	.list-item span {
		margin-right: 10px;
	}

	.page-current {
		color: #ff6600;
		padding: 4px 10px 5px;
		font-size: 14PX;
		/*修复行内元素之间空隙间隔*/
	}

	.page-disabled {
		color: #ccc;
	}

	.page-next i,
	.page-disabled i {
		cursor: pointer;
		/*设置鼠标经过时的显示状态，这里设置的是显示状态为小手状态*/
		display: inline-block;
		/*设置显示的方式为行内块元素*/
		width: 5px;
		height: 9px;
		background-image: url(http://img.mukewang.com/547fdbc60001bab900880700.gif);
		/*获取图标的背景链接*/
	}

	.page-disabled i {
		background-position: -80px -608px;
		margin-right: 3px;
	}

	.page-next i {
		background-position: -62px -608px;
		margin-left: 3px;
	}
</style>